<template>
  <div class="login-container">
    <div class="login-bg">
      <img :src="require('@/assets/images/login-bg.jpg')" alt="">
    </div>
    <div class="login-hd">
      <img :src="require('@/assets/images/sub_logo_color.png')" class="logoImg" alt="">
      <van-form class="login-form" @submit="handleLogin">
        <div class="title-container">
          <h3 class="title">Chiship●H5快速开发平台</h3>
        </div>
        <van-field
          v-model="loginForm.username"
          clearable
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="loginForm.password"
          type="password"
          clearable
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="loginForm.verificationCode"
          center
          clearable
          label="验证码"
          placeholder="请输入图形验证码"
          maxlength="4"
          :rules="[{ required: true, message: '请填写图形验证码' }]"
        >
          <template #button>
            <span style="display: flex;;cursor: pointer;" @click="getCaptchaCode"><img :src="captchaCode"> </span>
          </template>
        </van-field>
        <div class="remember-wrap">
          <van-checkbox v-model="rememberPwd">记住密码</van-checkbox>

          <span class="forget-pwd">忘记密码</span>
        </div>
        <div style="margin-top: 2rem;">
          <van-button block type="info" native-type="submit">登陆</van-button>
        </div>
      </van-form>
      <div class="login-type-container">
        <div class="login-type-title">
          <span />
          <div>其他登录方式</div>
          <span />
        </div>
        <div class="login-other-type">
          <div @click="handleThirdLogin('OAUTH_CHANNEL_WX_WORK_WEB')">
            <svg-icon icon-class="loginTypeQYWX" />
          </div>
          <div @click="handleThirdLogin('OAUTH_CHANNEL_DING_TALK')">
            <svg-icon icon-class="loginTypeDingDing" />
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">Copyright @ 2024 智舰网络版权所有</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      rememberPwd: true,
      captchaCode: '',
      loginForm: {
        username: '',
        password: ''
      },
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCaptchaCode()
    var user = localStorage.getItem('user')
    if (user) {
      try {
        this.loginForm = {
          ...JSON.parse(user),
          verificationCode: ''
        }
      } catch (err) {
        console.log(err)
      }
    }
  },
  methods: {
    getCaptchaCode() {
      this.$store.dispatch('getCaptchaCode').then((res) => {
        this.captchaCode = res
      }).catch((_) => {})
    },
    handleLogin() {
      var user = Object.assign({}, this.loginForm)
      if (this.rememberPwd === true) {
        localStorage.setItem('user', JSON.stringify(this.loginForm))
      } else {
        localStorage.removeItem('user')
      }
      this.$store.dispatch('login', user).then(() => {
        this.$router.push({ path: this.redirect || '/' })
      }).catch(() => {
        this.getCaptchaCode()
        this.loginForm = {
          ...this.loginForm,
          verificationCode: ''
        }
      })
    },
    handleThirdLogin(channel) {
      this.$store.dispatch('thirdOauth2Auth', {
        callback: encodeURIComponent(this.T.getUrl() + '/#/login'),
        oauthChannel: channel
      }).then(res => {
        window.location.href = res
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    .login-bg{
      img{
        width: 100%;
        height: 342px;
      }
    }
    .login-hd{
      width: 100%;
      position: absolute;
      top: 7rem;
      left: 50%;
      transform: translate(-50%, 0rem);
      justify-content: center;
      display: flex;
      flex-direction: column;
      padding: 0 20px;
      text-align: center;
      .logoImg{
        width: 8rem;
        margin: 0 auto;
      }
      .login-type-container{
        margin-top: 30px;
        .login-type-title{
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          span {
            width: 100px;
            border-bottom: 1px solid #4E5A70;
            opacity: 0.1;
          }
          div {
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            line-height: 17px;
            color: #7A8599;
            opacity: 0.4;
            transform: translateY(8px);
          }
        }
        .login-other-type{
          display: flex;
          justify-content: center;
          margin-top: 20px;
          div{
            margin-left: 32px;
          }
          div:first-child{
            margin-left: 0px;
          }
          .svg-icon{
            display: block;
            width: 32px;
            height: 32px;
            box-sizing: border-box;
            cursor: pointer;
          }
        }
      }
    }
    .copyright{
      width: 100%;
      height: 1rem;
      position: fixed;
      bottom: 3.1875rem;
      right: 0;
      text-align: center;
      color: #a2a7be;
      font-size: .75rem;
    }

    .login-form {
      margin-top: 2.5rem;
      padding: 0 2rem;
      width: 100%;
      .remember-wrap{
        margin-top: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .875rem;
        color: $colorPrimary;
        padding: 0 10px;
      }
    }

    .title-container {
      position: relative;
      .title {
        font-size: 1.625rem;
        color: "#000";
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }
  }
  </style>

